<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="assessment">
    <!-- <nu-col :span="24" style="height: calc(130px - 20px)"> -->
    <!-- <nutbTitle title="考核总览"></nutbTitle> -->
    <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="时间" prop="checkDate" width="320px" :rules="[{ required: true, message: '日期不能为空' }]">
        <el-date-picker v-model="formData.checkDate" type="month" placeholder="请选择日期" style="width: 100%"
          value-format="yyyy-MM">
        </el-date-picker>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchLine">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
        <nu-button class="searchButton" @click="exportTable">导出</nu-button>
        <nu-button class="searchButton" v-print="printOption">打印</nu-button>
      </div>
    </NuVerifyForm>
    <!-- </nu-col> -->
    <div class="line"></div>
    <!-- <nu-col :span="24" style="width: 100%; height: calc(100% - 130px - 20px)"> -->
    <nu-row class="row" :gutter="20">
      <!-- <nu-col :span="5" class="col">
        <nuTree v-model="currentLivingObj.id" :options="treeData" :props="defaultProps" @onClickNode="handleNodeClick"></nuTree>
      </nu-col> -->
      <nu-col :span="24" class="col">
        <nu-echarts width="auto" height="calc((100vh - 290px) - 200px)" :option="lineOption" class="echarts" style="
                margin: auto;
                margin-top: 0;
                margin-left: 30px;
                margin-right: 30px;
                padding: 20px 0 0 0;
              " v-if="isEchart"></nu-echarts>
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
          :operates="operates(this)" style="margin: 0 0 20px 0">
        </NuTableList>
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="optionsPrint"
          style="position: absolute;left: -5000px;z-index: -100;opacity: 0;">
        </NuTableList>
      </nu-col>
    </nu-row>

    <nu-dialog :title="openDiaogType.title" :visible.sync="openDiaogType.open" width="1000px" center
      :close-on-click-modal="false" top="5vh" :modal-append-to-body="false">
      <div style="margin:40px 20px">考核基本原则：发电计划考核、调峰考核取考核扣罚电量最大的一款执行</div>
      <NuTableList :showFilter="false" :columns="diangoColumns" :dataSource="dataSource2" :options="{...options, height:'500px'}"
        style="margin: 0 0 20px 0">
      </NuTableList>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="openDiaogType.open = false">取 消</el-button>
      </div>
    </nu-dialog>
    <!-- </nu-col> -->
  </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue";
import nutbTitle from "@/components/base/tableTitle.vue";
import nuEcharts from "@/components/base/echarts";
import NuVerifyForm from "@/components/verify-form";
import NuformItem from "@/components/verify-form/form-item.vue";
import nuInput from "@/components/base/input";
import nuSelect from "@/components/base/select";
import nuButton from "@/components/base/button";
import NuTableList from "@/components/tableList/TableFormList";
import nuRow from "@/components/base/row.vue";
import nuTree from "@/components/base/tree";
import nuDialog from "@/components/base/dialog"
import * as echarts from "echarts";
import axios from "axios";
import { getDateTime } from "@/utils/ruoyi";
const operates = that => [
  {
    label: '发电计划/调峰取值详情',
    icon: '',
    width: '50px',
    isShow: row => {
      return true;
    },
    disabled: row => {
      return false;
    },
    method: row => {
      that.openEdit(row);
    },
  },
  {
    isShow: row => {
      return false;
    },
  },
];
export default {
  name: "assessment",
  components: {
    nuCol,
    nutbTitle,
    nuEcharts,
    NuVerifyForm,
    NuformItem,
    nuInput,
    nuSelect,
    nuButton,
    NuTableList,
    nuRow,
    nuTree,
    nuDialog
  },
  data() {
    return {
      formData: {
        checkDate: "",
      },
      operates,
      openDiaogType: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      fyButtons: [],
      isEchart: true,
      lineOption: {
        color: ["#40b0e2", "#69e5c1", "#626b90", "#a0a7e5"],
        title: {
          text: "",
          left: "0",
          //   textStyle: {
          //     fontWeight: "normal",
          //   },
        },
        tooltip: {
          trigger: "item",
        },
        grid: {
          left: "3%",
          right: "3%",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              show: true,
              position: "outside",
              // formatter: "{a|{b}：{d}%}\n{hr|}",
              formatter: (params) => {
                return `${params.name} : ${params.percent || 0}%`
              },
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12],
                },
                a: {
                  padding: [-30, 15, -20, 15],
                },
              },
            },
            labelLine: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1,
              },
            },
            data: [],
          },
        ],
      },
      dataSource: [],
      dataSource2: [],
      columns: [
        {
          label: "时间",
          prop: "time",
        },
        {
          label: "考核总电量（MWh）",
          prop: "totalEnergyCheck",
        },
        {
          label: "发电计划考核电量（MWh）",
          prop: "energyCheckSchedule",
        },
        {
          label: "调峰考核电量（MWh）",
          prop: "energyCheckPeak",
        },
        {
          label: "母线电压考核电量（MWh）",
          prop: "energyCheckBusVolt",
        },
        {
          label: "AGC考核电量（MWh）",
          prop: "energyCheckAgc",
        },
      ],
      diangoColumns: [
        {
          label: "时间",
          prop: "time",
        },
        {
          label: "机组",
          prop: "name",
        },
        {
          label: "发电计划考核电量（MWh）",
          prop: "checkScheduleVal",
        },
        {
          label: "调峰考核电量（MWh）",
          prop: "checkPeakVal",
        },
        {
          label: "备注",
          prop: "remark",
        },
      ],
      options: {
        "default-expand-all": true,
        "element-loading-background": "rgba(225,239,242)",
        "element-loading-text": "数据正在加载中",
        "row-key": "pid",
        "header-cell-style": {
          background: "rgba(105, 159, 209, 0.7)",
          color: "#fff",
          fontWeight: "bold",
          fontsize: "16px",
        },
        isNoSetHeight: true,
        height: '200px',
      },
      treeData: [],
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "label", // 标签显示
        children: "children", // 子级
      },
      currentLivingObj: { id: "" },
      printOption: {
        id: "multipleTable",
        preview: true,
        previewTitle: "预览",
        popTitle: "",
        extraHead: "",
        extraCss: `<meta http-equiv='Content-Language' content='zh-cn'/>`
      },
      optionsPrint: {
        'row-key': 'pid',
        height: '100vh',
        tId: 'multipleTable',
        style: 'width:1000px'
      }
    };
  },
  created() { },
  mounted() {
    this.formData.checkDate = getDateTime("month");
    // this.getTreeData();
    this.getCheckScheduleMonthDetails()
  },
  methods: {
    /**
     * 查询
     */
    searchLine() {
      this.$refs["formData"].searchForm("form");
    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getCheckScheduleMonthDetails();
      }
    },
    /**
   * 表格数据
   */
    getCheckScheduleMonthDetails() {
      this.$httpGet(window.api.getCheckElectricMonthDetails, { checkDate: this.formData.checkDate }).then((res) => {
        if (res.code == 200) {
          this.isEchart = false;
          this.dataSource = res.data.tableData
          this.dataSource2 = res.data.tableDataDetails
          this.lineOption.series[0].data = res.data.baseData
          this.$nextTick(() => {
            this.isEchart = true;
          });
        }
      })
    },
    /**
     * 类型change事件
     */
    typeChange() { },
    /**
     * 清除数据
     */
    clearParams() {
      this.resetForm("formData");
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm("form");
      for (let k in this[formName]) {
        if (
          Object.prototype.toString.call(this[formName][k]) == "[object String]"
        ) {
          this[formName][k] = "";
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Array]"
        ) {
          this[formName][k] = [];
        } else if (
          Object.prototype.toString.call(this[formName][k]) == "[object Number]"
        ) {
          this[formName][k] = "";
        }
      }
    },

    openEdit(row) {
      console.log(row)
      // Object.assign(this.dialogFormData, row)
      this.openDiaogType.open = true
      this.openDiaogType.title = "月数据详情"
      // this.dialogFormData.identification = true
      // this.dialogFormData.channelStatus = 1
      // this.getChannelGroupSet()
    },
    /**
     * 导出
     */
    exportTable() {
      let postData = {
        ...this.formData,
        nodeName: this.currentLivingObj.name,
        bidUnitId: this.currentLivingObj.id,
      };
      this.getDownload(window.api.checkElectricMonthDetailsExportFile, {
        ...postData
      }, `月度考核电量分析.xlsx`)
    },
    /**
     * tree节点单击
     */
    handleNodeClick(item, data) {
      this.currentLivingObj = item;
      this.currentLivingObj["level"] = data.level;
    },

  },
};
</script>
    
<style scoped lang="scss">
.assessment {
  height: 100%;
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  align-items: center;
  position: relative;
}

.btnBox {
  display: flex;
  float: right;
  z-index: 10;
  position: absolute;
  top: 15px;
  right: 10px;
}

.row {
  height: calc(100% - 90px);
  width: 100%;
}

.col {
  height: 100%;
}

::v-deep .el-form-item__content {
  height: 34px;
}
</style>
    
    